<template>
  <div class="nav">
    <!-- 鸿浩电梯logo -->
    <div class="logo">
      <slot></slot>
    </div>
    <!-- 导航条 -->
    <nav class="header-nav clearfix">
      <li class="link-item">
        <router-link to="/" class="a-itme">网站首页</router-link>
      </li>
      <li class="xia link-item">
        <router-link to class="a-itme">服务报价<i class="iconfont iconjiantou-xia"></i></router-link>
        <!-- 下拉菜单 -->
        <ul id="pull">
          <li>
            <router-link to="/">服务报价</router-link>
          </li>
          <li>
            <router-link to="/">服务报价</router-link>
          </li>
          <li>
            <router-link to="/">服务报价</router-link>
          </li>
        </ul>
      </li>
      <li class="link-item">
        <router-link to class="a-itme">服务方案</router-link>
      </li>
      <li class="xia link-item">
        <router-link to="/teamwork" class="a-itme">合作加盟<i class="iconfont iconjiantou-xia"></i></router-link>
        <!-- 下拉菜单 -->
        <ul id="pull">
          <li>
            <router-link to="/">物业合作</router-link>
          </li>
          <li>
            <router-link to="/">维保企业加盟</router-link>
          </li>
          <li>
            <router-link to="/">配件供应商合作</router-link>
          </li>
        </ul>
      </li>
      <li class="link-item">
        <router-link to="/aboutUs" class="a-itme">关于我们</router-link>
      </li>
      <li class="xia link-item">
        <router-link to class=" a-itme"> 帮助中心 <i class="iconfont iconjiantou-xia"></i></router-link>
        <!-- 下拉菜单 -->
        <ul id="pull">
          <li>
            <router-link to="/helpCenter">新手指引</router-link>
          </li>
          <li>
            <router-link to="/commonProblem">常见问题</router-link>
          </li>
          <li>
            <router-link to="/problemFeedback">意见反馈</router-link>
          </li>
          <li>
            <router-link to>技术问答</router-link>
          </li>
          <li>
            <router-link to>
              <p>联系客服</p>
              <p>400-1234-567</p>
            </router-link>
          </li>
        </ul>
      </li>
      <!-- 登录/注册按钮 -->
      <li class="link-item">
        <!-- <router-link to="/login"> <el-button plain>登录/注册</el-button></router-link> -->
      </li>
    </nav>
  </div>
</template>
<script>
export default {
  name: "Nav"
};
</script>
<style lang='scss' scoped>
.nav {
  .logo {
    img {
      position: absolute;
      top: 0;
      left: 121px;
    }
  }
  z-index: 999;
  position: absolute;
  top: 0;
  width: 100%;
  min-width: 1290px;
  .header-nav {
    height: 51px;
    margin-left: 35%;
    .link-item {
      position: relative;
      float: left;
      height: 100%;
      margin-left: 4%;
      color: #fff;
      font-size: 18px;
      line-height: 51px;
      .a-itme {
       
        color: #fff;
        font-size: 16px;
        display: inline-block;
        text-align: center;
        height: 100%;
        line-height: 51px;
        opacity: 0.9;
        transition: all 0.1s linear;

        &:hover {
          border-bottom: 3px solid #4f7bd9;
          opacity: 1;
        }
      }
    }
  }
  .xia {
    .a-itme {
      &:hover {
       + #pull {
          opacity: 1;
          display: block;
        }
      }
    }

    #pull {
      display: none;
      opacity: 0;
      position: absolute;
      top: 51px;
      left: -2px;
      width: 136px;
      background-color: #fff;
      border-radius: 3px;
      &::before {
        content: "";
        height: 10px;
        width: 10px;
        position: absolute;
        z-index: -1;
        top: -5px;
        left: 26px;
        transform: rotate(45deg);
        background-color: #fff;
      }
      li {
        margin-left: 0;
        width: 100%;
        display: flex;
        a {
          font-size: 14px;
          color: #666;
          line-height: 35px;
          margin: 0 7px;
          padding: 0 5px;
          box-sizing: border-box;
          border-bottom: 1px solid #ccc;
          width: 100%;
        }
        &:hover {
          background-color: rgba(0, 0, 0, 0.1);
        }
      }
      &:hover{
        opacity: 1;
        display: block;
      }
    }
  }
}
</style>
<style lang="scss">
.nav {
  margin-top: 30px;
  .el-button {
    border: 1px solid #fff;
    color: #fff;
    background-color: rgba(255, 255, 255, 0);
    opacity: 0.8;
    &:hover {
      background-color: rgba(255, 255, 255, 0);
      opacity: 1;
      color: #fff;
      border: 1.3px solid #fff;
    }
  }
}
</style>